<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>圣杯布局</title>

  <link rel="stylesheet" href="./index.css">
</head>

<body>

  <header>
    <p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p>
  </header>
  <main>
    <article>
      <p>参考链接：
        <a href="https://zhuanlan.zhihu.com/p/161822219">原文地址</a>
      </p>
      <p>
        圣杯布局（Holy Grail Layout）)是Web中典型的布局模式。看上去像下图这样：
      </p>
      <img src="https://pic2.zhimg.com/80/v2-a8f1b99edf88b4cf1070032987e9bb75_720w.png" alt="">
      <p>通过在 nav、aside 和 article 上显式设置 order 的值，可以很好的控制这三个区域的布局顺序。
        <br> 比如说，希望 在 之前排列，只需要在上面的示例基础上做一点点调整：</p>

    </article>
    <nav>左👈</nav>
    <aside>👉</aside>
  </main>
  <footer>
      <p>一些文字</p><p>一些文字</p>
  </footer>
</body>

</html>